<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的工具" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style=" background-color: #F2F3F5;">
			<!-- <view style="height: 25rpx;"></view> -->
			<view class="uni-cell-90" style="margin-top: 35rpx;">
				<view :class="current == 0 ? 'iconType1' : 'iconType2'">
					<view class="text1" @click="changeTabs1(0)">
						物业配送
					</view>
					<view class="text2" @click="changeTabs1(1)">
						自提
					</view>
				</view>
			</view>
			<view style="background-color: #FFFFFF;margin-top: 10px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="currentTab" @change="changeTabs">
				</u-tabs>
			</view>
			<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;"
				v-for="(item, index) in toolList">
				<view class="user-list">
					<view style="padding: 5rpx 20rpx">
						<view class="title" style="height:80rpx;line-height: 80rpx;">
							<view style="float: left; clear: both;">
								<text>{{item.title}}</text>
							</view>
							<view style="float: right; margin-right: 20rpx; color: #666666; font-weight: 400;">
								<text>{{item.status_label}}</text>
							</view>

						</view>
						<u-line></u-line>
						<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
							<view class="d_view">
								<text class="l_title">借用工具</text>
								<text class="d_content">{{item.tool}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">联系人</text>
								<text class="d_content">{{item.name}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">联系电话</text>
								<text class="d_content">{{item.tel}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">预约时间</text>
								<text class="d_content">{{item.create_time}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">使用时间</text>
								<text class="d_content">{{item.time}}</text>
							</view>
						</view>
						<u-line v-if="item.status == 3 || item.status == 4"></u-line>
						<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;"
							v-if="item.status == 3 || item.status == 4">
							<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
								@click="toshowModal(item)">删除</u-button>
						</view>
						<view style="clear: both;"></view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="showDel" title="确定删除此条信息吗？" width="500rpx" @confirm="comfirm" @cancel="showDel = false" showCancelButton> </u-modal>
		<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		getMyTools,delTool
	} from "@/service/shareService.js";
	export default {
		data() {
			return {

				current: 0,
				currentTab: 0,
				tabs: [{
						name: '待审核'
					},
					{
						name: '借用中'
					},
					{
						name: '待使用'
					},
					{
						name: '已归还'
					},
					{
						name: '过期/取消'
					}
				],
				toolList: [],
				showEmpty: false,
				showDel: false,
				item:{},
			}
		},
		onLoad() {
			getMyTools().then(this.getMyTools);
		},
		methods: {
			getMyTools(e) {
				if (e.code == 200) {
					this.showEmpty = false;
					this.toolList = e.result;
				} else {
					this.toolList = [];
					this.showEmpty = true;
				}
			},
			toshowModal(item){
				this.item=item;
				this.showDel=true
			},
			comfirm(){
				delTool({
					id:this.item.id
				}).then(res=>{
					if(res.code==200){
						this.showDel=false;
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								
							}
						})
						this.current=0;
						getMyTools().then(this.getMyTools);
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			},
			changeTabs1(index) {
				this.current = index;
				this.changeTabs({
					index: 0
				})
			},
			changeTabs(e) {
				let par = {};
				this.currentTab = e.index;
				par.type = this.current
				switch (this.currentTab) {
					case 1:
						par.status = 1;
						break;
					case 2:
						par.status = 2;
						break;
					case 3:
						par.status = 3;
						break;
					case 4:
						par.status = -1;
						break;
					default:
						par.status = 0;
				}
				getMyTools(par).then(this.getMyTools);
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 98%;
		margin-left: 1%;
		margin-bottom: 44rpx;
	}

	.card-head {
		border-radius: 20rpx;
	}

	.iconType1 {
		display: flex;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url("https://resourse.cnlhjt.com/upload/20220825/cc11a7c90fd03237c848a54a7dce4675.png");
		background-size: 100% 100%;

		.text1 {
			color: #FFFFFF;
			text-align: center;
			width: 50%;
		}

		.text2 {
			color: #0B868E;
			text-align: center;
			width: 50%;
		}
	}

	.iconType2 {
		display: flex;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-image: url("https://resourse.cnlhjt.com/upload/20220825/4f209d22fd4d6b4b1feae42fa175f3a7.png");
		background-size: 100% 100%;

		.text1 {
			color: #0B868E;
			text-align: center;
			width: 50%;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 50%;
		}
	}

	.l_title {
		font-size: 30rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		display: inline-block;
		width:80%;
		color: #666666;
		font-size: 28rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
